<template>
    <div>
        <el-button size="mini" slot="trigger" type="primary" style="margin: 20px 0" @click="onShowTz(1)"
            >添加新增默认团长</el-button
        >
        <el-table :data="pager.lists">
            <el-table-column prop="name" label="团队名字"> </el-table-column>
            <el-table-column prop="status_text" label="状态"> </el-table-column>
            <el-table-column label="是否默认">
                <template slot-scope="scope">
                    <div v-if="scope.row.is_default == 1">是</div>
                    <div v-if="scope.row.is_default == 2">否</div>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="日期"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex row-right m-t-24">
            <ls-pagination v-model="pager" @change="getListData()"></ls-pagination>
        </div>

        <el-dialog title="添加" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <!-- 用户数据 -->
            <div>
                <el-table
                    ref="paneTable"
                    style="width: 100%"
                    size="mini"
                    :data="pagers.lists"
                    v-loading="pagers.loading"
                >
                    <el-table-column fixed="left" width="55">
                        <template slot-scope="scope">
                            <el-checkbox :value="selectItem(scope.row)" @change="handleSelect($event, scope.row)">
                            </el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sn" label="用户编号" min-width="120"> </el-table-column>
                    <el-table-column label="用户昵称" min-width="120">
                        <template slot-scope="scope">
                            <div class="flex">
                                <el-image :src="scope.row.avatar" style="width: 34px; height: 34px"></el-image>
                                <div class="m-l-10">
                                    {{ scope.row.nickname }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user_money" label="用户余额" min-width="120"> </el-table-column>
                    <el-table-column prop="mobile" label="手机号码" min-width="120"> </el-table-column>
                    <el-table-column prop="is_distribution" label="分销会员" min-width="120">
                        <template slot-scope="scope">
                            {{ scope.row.is_distribution == 1 ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="注册时间" min-width="120"> </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="m-t-24 flex row-center">
                <ls-pagination v-model="pagers" @change="getUserInfoList()" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <dialog-teamtuanyuan :dialogVisible="dialogVisibles" :teamList="teamList"></dialog-teamtuanyuan> -->
        <el-dialog :title="nameis" :visible.sync="dialogVisibles" width="60%" :before-close="handleCloses">
            <el-button type="primary" @click="onShowTz(2)">添加成员</el-button>
            <el-table :data="pageras.lists" v-loading="pageras.loading">
                <el-table-column prop="user_id" label="用户ID"> </el-table-column>
                <el-table-column prop="mobile" label="手机号码"> </el-table-column>
                <el-table-column label="昵称（推荐人ID）">
                    <template slot-scope="scope"> {{ scope.row.nickname }}({{ scope.row.parent_id }}) </template>
                </el-table-column>
                <el-table-column prop="user_type_text" label="等级"> </el-table-column>
                <el-table-column prop="sort" label="顺序"> </el-table-column>

                <el-table-column prop="create_time" label="日期"> </el-table-column>
                <el-table-column label="是否默认">
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_default == 1">是</div>
                        <div v-if="scope.row.is_default == 2">否</div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {
    apiGetTeamlist,
    apiPostAddDefaultTeam,
    apiPostTeamlists,
    apiPsotAddDefaultUserTeam
} from '@/api/distribution/distribution'
import { RequestPaging } from '@/utils/util'
import { apiSelectUserLists } from '@/api/user/user'
import LsPagination from '@/components/ls-pagination.vue'
import dialogTeamtuanyuan from '@/components/dialog_teamtuanyuan.vue'
@Component({
    components: {
        LsPagination,
        dialogTeamtuanyuan
    }
})
export default class DistributionGoods extends Vue {
    apiGetTeamlist = apiGetTeamlist
    pager = new RequestPaging()
    pagers = new RequestPaging() // 用户数据分页
    pageras = new RequestPaging() // 用户数据分页
    dialogVisible: any = false
    dialogVisibles: any = false
    selectIds: any[] = [] //当前选中的用户数组
    teamList: any = []
    ids: any = null
    statusio: any = 1
    nameis: any = ''

    handleClose() {
        this.dialogVisible = false
    }
    // 获取用户数据
    getListData(page?: number): void {
        page && (this.pager.page = page)
        this.pager.request({
            callback: apiGetTeamlist
        })
    }
    // 获取添加团长用户数据
    getUserInfoList(page?: number): void {
        page && (this.pagers.page = page)
        this.pagers.request({
            callback: apiSelectUserLists,
            params: {
                team_type: this.statusio
            }
        })
    }
    // 获取当前的选择
    get selectItem() {
        return (row: any) => {
            return this.selectIds.some(item => item.id === row.id)
        }
    }
    // 选择当前用户
    handleSelect(event: boolean, row: any) {
        if (event) {
            if (this.selectIds.length < 1 && this.statusio == 1) {
                this.selectIds.push(row)
                console.log(this.selectIds)
            } else if (this.selectIds.length < 2 && this.statusio == 2) {
                this.selectIds.push(row)
                console.log(this.selectIds)
            }
        } else {
            const index = this.selectIds.findIndex(item => item.id === row.id)
            if (index != -1) {
                this.selectIds.splice(index, 1)
            }
        }
    }
    confirm() {
        if (this.statusio == 1) {
            apiPostAddDefaultTeam({
                user_id: this.selectIds[0].id
            })
                .then(res => {
                    this.dialogVisible = false
                    this.selectIds = []
                })
                .catch(err => {
                    this.dialogVisible = false
                    this.selectIds = []
                })
        } else {
            apiPsotAddDefaultUserTeam({
                user_id: [this.selectIds[0].id, this.selectIds[1].id]
            })
                .then(res => {
                    console.log(res)
                    this.dialogVisible = false
                    this.selectIds = []
                })
                .catch(err => {
                    this.dialogVisible = false
                    this.selectIds = []
                })
        }
    }
    onShowTz(i: any) {
        this.dialogVisible = true
        this.statusio = i
        this.getUserInfoList()
        console.log(i)
    }
    handleClick(row: any) {
        console.log(row)
        this.dialogVisibles = true
        this.ids = row.id
        this.nameis = row.name
        // apiPostTeamlists({
        //     team_id:row.id
        // }).then(res=>{
        //     console.log(res);
        //     // this.teamList = res
        // })
        if (this.ids != null) {
            apiPostTeamlists({
                team_id: this.ids
            }).then(res => {
                this.pageras = res
            })
        }
    }

    // getUserInfoLists(page?: number): void {
    //     page && (this.pageras.page = page)
    //     this.pageras.request({
    //         callback: apiPostTeamlists,
    //         params: {
    //             team_id: this.ids
    //         }
    //     })
    // }
    handleCloses() {
        this.dialogVisibles = false
    }
    created() {
        this.getListData()
    }
}
</script>

<style lang="scss" scoped>
.pointer:hover {
    color: $--color-primary;
}
</style>
